<template>
  <div class="content with-diagram">
    <div class="canvas" ref="actBpmnJsCanvas"></div>
    <div class="properties-panel-parent" ref="actBpmnJsPropertiesPanel"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, markRaw } from 'vue'

import BpmnModeler from 'bpmn-js/lib/Modeler'
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel'
import minimapModule from './diagram-js-minimap'

import ActivitiPlatformPropertiesProviderModule from './activiti-platform'
import ActivitiBpmnModdle from './activiti-platform/resources/activiti.json'

import customControlsModule from './custom'

import './diagram-js.css'
import './bpmn-js.css'
import './bpmn-embedded.css'
import './properties-panel.css'
import './diagram-js-minimap.css'

export default defineComponent({
  name: 'ActProcessEditor',
  props: {
    xmlStr: {
      type: String,
      required: true
    }
  },
  emits: [
  ],
  data() {
    return {
      bpmnModeler: null,
    }
  },
  computed: {
  },
  methods: {
    async init() {
      this.bpmnModeler = markRaw(new BpmnModeler({
        container: this.$refs.actBpmnJsCanvas,
        propertiesPanel: {
          parent: this.$refs.actBpmnJsPropertiesPanel
        },
        additionalModules: [
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule,
          ActivitiPlatformPropertiesProviderModule,
          minimapModule,
          customControlsModule
        ],
        moddleExtensions: {
          activiti: ActivitiBpmnModdle
        },
        keyboard: {
          bindTo: document
        }
      }))
      await this.bpmnModeler.importXML(this.xmlStr)
    }
  },
  mounted() {
    this.init()
  }
})
</script>

<style scoped lang="less">

.djs-palette.two-column.open {
  width: 48px;
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;

  > .message {
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;

    font-size: 16px;
    color: #111;

    .note {
      vertical-align: middle;
      text-align: center;
      display: table-cell;
    }

    &.error {
      .details {
        max-width: 500px;
        font-size: 12px;
        margin: 20px auto;
        text-align: left;
        color: #BD2828;
      }

      pre {
        border: solid 1px #BD2828;
        background: #fefafa;
        padding: 10px;
        color: #BD2828;
      }
    }
  }
  &:not(.with-error) .error,
  &.with-error .intro,
  &.with-diagram .intro {
    display: none;
  }

  .canvas {
    width: 100%;
  }

  .canvas,
  .properties-panel-parent {
    display: none;
  }

  &.with-diagram {
    .canvas,
    .properties-panel-parent  {
      display: block;
    }
  }
}

.properties-panel-parent {
  width: 400px;
  border-left: 1px solid #ccc;
  overflow: auto;
  &:empty {
    display: none;
  }
  > .djs-properties-panel {
    padding-bottom: 70px;
    min-height:100%;
  }
}

</style>
